<template>
  <div class="welcome-wrap">
    <div class="img"><img :src="imgSrc" /></div>
    <div class="name">欢迎进入<br />{{ title }}</div>
  </div>
</template>

<script lang="ts" setup>
import { queryChannelDetail } from '@/service/apis/channel';
import imgUrl from '@/assets/images/main/welcome.png';

const proxy: any = getCurrentInstance()?.proxy;

const route = useRoute();

let title = ref(document.title);

const imgSrc = ref(imgUrl);

const emit = defineEmits(['channel-name']);
const setImg = () => {
  const channelId = window.localStorage.getItem('channelId');
  if (channelId) {
    queryChannelDetail({ id: channelId }).then((res: any) => {
      title.value = `${res?.operatorName || proxy.$config.name}${
        proxy.$config.title
      }`;
      emit('channel-name', res.operatorName);
      if (res.businessLogo) {
        imgSrc.value = res.businessLogo;
      } else {
        imgSrc.value = imgUrl;
      }
    });
  } else {
    title.value = document.title;
    emit('channel-name', '');
  }
};

// setImg();

watch(
  () => route,
  () => {
    setImg();
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.welcome-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .img {
    width: 266px;
    height: 238px;
    margin-right: 40px;
    // background-image: url('@/assets/images/main/welcome.png');
    // background-size: 100%;
    // background-repeat: no-repeat;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .name {
    line-height: 60px;
    color: var(--el-color-primary);
    font-size: 36px;
    font-weight: bold;
  }
}
</style>